<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        //传统注册事件的唯一性  后面的注册事件会把前面的覆盖
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function(){
            alert('hi');
        }
        btns[0].onclick = function(){
            alert('how are you ');
        }

        //方法监听注册方式 w3c标准 IE 以前的版本不支持  
        //addElementListener（） 同一个元素同一个事件可以注册多个事件
        //eventTarget.addEventListener(type,listener[,userCapture])
        /*eventTarget.addEventListener（）方法
        将指定的监听器注册到EventTarget（目标对象上）
        当该对象触发指定的事件时，就会执行事件处理函数
            type：事件类型字符串，比如click 、mouseover ，这里就不带on 但是需要加 ''
            listener ：事件处理函数，事件发生时，会调用该监听函数
            uweCapture：可选参数，是一个布尔值，默认为false*/
            btns[1].addEventListener('click',function(){
                alert(22);
            })
            btns[1].addEventListener('click',function(){
                alert(33);
            })

            /* attachEvent事件监听方式  ！！！eventTarget该特性是非标准的，尽量不要再生产环境中使用她
            eventTarget.attachEvent(eventNameWithon,callback)
            将指定的监听器注册到eventTarget（目标对象）上 当该对象触发指定
            事件时，指定的回调函数就会被执行。
            该方法接收两个参数：
            eventNameWithOn:事件类型字符串，比如onclick,onmouseover,这里要带on
            callBack：事件处理函数，当目标触发事件时回调函数被调用 */

            //attachEvent  ie9以前版本支持
            btns[2].attachEvent('onclick',function(){
                alert('123');
            })

            //注册事件兼容性解决方案
            function addEventListener(element,eventName,fn){
                //判断当前浏览器是否支持addEventListener方法
                if(element.addEventListener){
                    element.addEventListener(eventName,fn);//第三个参数默认是false
                }else if(element.attachEvent){
                    element.attachEvent('on' + eventName,fn);

                }else{
                    //相当于element.onclick = fn;
                    element['on' + eventName] = fn;
                }
            }
            //兼容性处理原则：首先照顾大多数浏览器，再处理特殊浏览器
    </script>
</body>
</html>